<template>
  <div class="pr-24 py-24 bd-filt-6 bgc-lightgrey">
    <el-form-item label="卡片底色" class="mb-24">
      <ColorSetting v-model="style.backgroundColor" />
    </el-form-item>
    <RichTextSetting
      ref="richText"
      class="rich-text"
      :color.sync="config.color"
      :text.sync="config.text"
      text-label="数据来源说明"
      @change="colorChange"
    />
    <el-form-item label="文本样式" class="mb-24">
      <FontStyleSetting v-model="style" />
    </el-form-item>
    <el-form-item label="基金代码" class="mb-24">
      <el-input v-model="config.fundCode" placeholder="请输入基金代码" @change="initData" />
    </el-form-item>
    <el-form-item label="基金名称" class="mb-24">
      <el-input v-model="config.fundName" :maxlength="30" show-word-limit />
    </el-form-item>
    <BorderSetting v-model="model" />
  </div>
</template>

<script>
  import { getHexColor } from '@/utils';
  import ColorSetting from '@/views/productEdit/components/settingComponent/ColorSetting';
  import BorderSetting from '@/views/productEdit/components/settingComponent/BorderSetting';
  import FontStyleSetting from '@/views/productEdit/components/settingComponent/FontStyleSetting';
  import RichTextSetting from '@/views/productEdit/components/settingComponent/RichTextSetting';

  export default {
    components: { ColorSetting, BorderSetting, FontStyleSetting, RichTextSetting },

    model: { prop: 'model' },

    props: {
      model: {
        type: Object,
        default: () => ({})
      }
    },

    computed: {
      config() {
        return this.model.config;
      },
      style() {
        return this.model.style;
      }
    },

    mounted() {
      this.$refs.richText.setRichText(this.config.text);
    },

    methods: {
      getHexColor,

      async initData() {
        const { data } = await this.$http.getFundDataSource({ fundId: this.config.fundCode });
        this.config.text = `<span style="color:rgba(51,51,51,1)">${data?.dataSource || ''}</span>`;
        this.$refs.richText.setRichText(this.config.text);
        this.config.fundName = data?.fundName || '';
      },
      colorChange(color) {
        this.config.color = color;
      }
    }
  };
</script>

<style lang="scss" scoped>
  .rich-text ::v-deep {
    .el-form-item:last-child {
      .el-form-item__label {
        padding-right: 16px;
      }
    }
  }
</style>
